<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>		
		<link rel="stylesheet" type="text/css" href="css/detail.css"/>
		<script src="js/jquery1.42.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--top-->
		<iframe src="public/public_top.html" width="100%" height="135px" frameborder="0" scrolling="no"></iframe>
		
		<!--header-->
		<header>
			<div class="i_logo">
				<img src="img/index/logo.png"/>
			</div>
			<div class="i_seach clear">
				<form action="#" method="get">
					<input class="seach_put" type="text" placeholder="请输入关键字"/>
					<input class="seach_btn" type="submit" value="搜索"/>
				</form>
					<div class="fl">
						<a href="#">咖啡</a>
						<a href="#">iphone  6s</a>
						<a href="#">新鲜美食</a>
						<a href="#">蛋糕</a>
						<a href="#">日用品</a>
						<a href="#">连衣裙</a>
					</div>
			</div>
			<div class="i_car fr">购物车</div>
		</header>
		<section>
			<!--导航栏-->
			<div class="clear">
				<div class="menu clear">
					<h2>全部商品分类</h2>
					<div class="menu_nav">
						<ul>
							<li><a class="active" href="#">首页</a></li>
							<li><a class="active" href="#">自营超市</a></li>
							<li><a href="#">1号团</a></li>
							<li><a href="#">1号超市</a></li>
							<li><a href="#">女装</a></li>
							<li><a href="#">美妆</a></li>
							<li><a href="#">1号海购</a></li>
							<li><a href="#">团购</a></li>
						</ul>
					</div>
				</div>
			</div>

			<div class="wrap">
				<!--商品详情-->
				<div class="position">
					<span>所有团购 > 包饰 > 珠韵首饰</span>
					<i>冰韵 天然白色正圆S925银扣珍珠项链</i>
				</div>
				<div class="detail clear">
					<div class="detail_img fl">
						<div class="img_big">
							<img src="img/detail/p_big.jpg" width="395" height="400"/>
						</div>
						<div class="img_thumb">
							<ul class="clear">
								<li><img src="img/detail/ps1.jpg"/></li>
								<li><img src="img/detail/ps2.jpg"/></li>
								<li><img src="img/detail/ps3.jpg"/></li>
								<li><img src="img/detail/ps4.jpg"/></li>
							</ul>
							<a class="prev" href="javascript:;"></a>
							<a class="next" href="javascript:;"></a>
						</div>
						
					</div>
					<div class="detail_des fl">
						<div class="des_title">
							<h2>珠韵首饰 冰韵 天然白色正圆S925银扣珍珠项链</h2>
							<span>全国包邮 送妈妈，正圆级淡水珍珠，白色S925银链扣，使用方便，尊贵礼物。</span>
						</div>
						<div class="des_price">
							<p>本店价格：<span>￥1786</span></p>
							<p>参考价：￥3886</p>
						</div>
						<div class="standard">
							<div class="size clear">
								<span class="fl">尺码：</span>
								<ul id="size" class="clear">
									<li class="active">43cm</li>
									<li>45cm</li>
									<li>50cm</li>
								</ul>
							</div>
							<div class="color clear">
								<span class="fl">颜色选择：</span>
								<ul id="color" class="clear">
									<li>粉色</li>
									<li class="active">白色</li>
								</ul>
							</div>
						</div>
						<div class="des_share">
							<a href="javascript:;">分享</a>
							<a href="javascript:;">关注商品</a>
						</div>
						<div class="des_add clear">
							<div class="fl">
								<input type="number" value="1"/>
							</div>
							<a class="fl" href="javascript:;"><img src="img/detail/j_car.png"/></a>
						</div>	
					</div>
					<div class="store fr">
						<img src="img/detail/sbrand.jpg"/>
						<div class="enter">
							<a href="javascript:;">进入品牌专区</a>
						</div>
					</div>
				</div>
				<div class="wrapper clear">
					<p class="userlike">用户还喜欢</p>
					<div class="like fl">
						<ul class="clear">
							<li>
								<div>
									<a href="javascript:;"><img src="img/detail/his_1.jpg"/></a>
								</div>
								<a href="javascript:;">科爱KEAL儿童日本书包减负护脊</a>
								<span>￥599</span>
							</li>
							<li>
								<div>
									<a href="javascript:;"><img src="img/detail/his_2.jpg"/></a>
								</div>
								<a href="javascript:;">科爱KEAL儿童日本书包减负护脊</a>
								<span>￥599</span>
							</li>
							<li>
								<div>
									<a href="javascript:;"><img src="img/detail/his_3.jpg"/></a>
								</div>
								<a href="javascript:;">科爱KEAL儿童日本书包减负护脊</a>
								<span>￥599</span>
							</li>
							<li>
								<div>
									<a href="javascript:;"><img src="img/detail/his_4.jpg"/></a>
								</div>
								<a href="javascript:;">科爱KEAL儿童日本书包减负护脊</a>
								<span>￥599</span>
							</li>
							<li>
								<div>
									<a href="javascript:;"><img src="img/detail/his_5.jpg"/></a>
								</div>
								<a href="javascript:;">科爱KEAL儿童日本书包减负护脊</a>
								<span>￥599</span>
							</li>
						</ul>
					</div>
					<div class="recommend fr">
						<div class="rec_tab">推荐搭配</div>
						<div class="rec_list fl">
							<div class="list_itme fl">
								<div class="img">
									<img src="img/detail/mat_1.jpg"/>
								</div>
								<div class="name">
									<p>粤通国际珠宝 999足金</p>
									<input type="checkbox" checked="checked"/>
									<span>￥76</span>
								</div>
							</div>
							<div class="plus fl">
								<img src="img/detail/jia_b.gif"/>
							</div>
							<div class="list_itme fl">
								<div class="img">
									<img src="img/detail/mat_2.jpg"/>
								</div>
								<div class="name">
									<p>粤通国际珠宝 999足金</p>
									<input type="checkbox"/>
									<span>￥76</span>
								</div>
							</div>
							<div class="plus fl">
								<img src="img/detail/jia_b.gif"/>
							</div>
							<div class="list_itme fl">
								<div class="img">
									<img src="img/detail/mat_3.jpg"/>
								</div>
								<div class="name">
									<p>粤通国际珠宝 999足金</p>
									<input type="checkbox"/>
									<span>￥76</span>
								</div>
							</div>
							<div class="equal fl">
								<img src="img/detail/equl.gif"/>
							</div>
						</div>
						<div class="rec_buy fr">
							<p>套餐价：￥<span>2000</span></p>
							<input type="number" value="1"/>
							<img src="img/detail/z_buy.gif"/>
						</div>
					</div>
					<div class="property fr">
						<div class="tab">
							<ul id="pro" class="clear">
								<li class="active">商品属性</li>
								<li>商品详情</li>
								<li>商品评论</li>
							</ul>
						</div>
						<div class="pro_list">
							<ul class="clear">
								<li>
									<p>商品名称：天然淡水珍珠</p>
									<p>商品毛重：160.00g</p>
									<p>镶嵌材质：纯银</p>
								</li>
								<li>
									<p>商品编号：1546211</p>
									<p>商品产地：法国</p>
									<p>款式：项链</p>
								</li>
								<li>
									<p>品牌： 珠韵首饰</p>
									<p>珍珠形状：正圆</p>
								</li>
								<li>
									<p>上架时间：2015-09-06 09:19:09</p>
								</li>
							</ul>
						</div>
					</div>
					<div class="clear">
						<div class="goods_detail fr">
							<div class="tab">商品详情</div>
							<div class="img_list">
								<img src="img/detail/de2.jpg"/><br/>
								<img src="img/detail/de3.jpg"/><br/>
								<img src="img/detail/de4.jpg"/><br/>
								<img src="img/detail/de5.jpg"/><br/>
								<img src="img/detail/de6.jpg"/><br/>
								<img src="img/detail/de7.jpg"/><br/>
								<img src="img/detail/de8.jpg"/>
							</div>
						</div>
					</div>
					<div class="comment fr">
						<div class="tab">商品评论</div>
						<div class="goodcom clear">
							<div class="degree fl">
								<h2>80.0%</h2>好评度
							</div>
							<div class="chart fl">
								<p><span>好评（10%）</span><img src="img/detail/pl.gif"/></p>
								<p><span>中评（10%）</span><img src="img/detail/pl.gif"/></p>
								<p><span>差评（80%）</span><img src="img/detail/pl.gif"/></p>
								
							</div>
							<div class="explain fl">
								<p>购买过珠韵首饰 天然银扣珍珠项链的顾客，在收到商品才可以对该商品发表评论</p>
							</div>
							<div class="com fl">
								<p>您可对已购买的商品评价</p>
								<a href="javascript:;">我要评论</a>
							</div>
						</div>
						<div class="com_list fl">
							<ul>
								<li class="clear">
									<div class="user fl">
										<img src="img/detail/peo1.jpg"/>向死而生
									</div>
									<div class="type fl">
										<p>颜色分类：<span>粉色</span></p>
										<p>型号：<span>43cm</span> </p>
									</div>
									<div class="content fl">
										<p>很好，下次不会再买</p>
										<span>2019-7-20</span>
									</div>
								</li>
								<li>
									<div class="user fl">
										<img src="img/detail/peo2.jpg"/>就是这样想的
									</div>
									<div class="type fl">
										<p>颜色分类：<span>粉色</span></p>
										<p>型号：<span>43cm</span> </p>
									</div>
									<div class="content fl">
										<p>很好，下次不会再买</p>
										<span>2019-7-20</span>
									</div>
								</li>
								<li>
									<div class="user fl">
										<img src="img/detail/peo3.jpg"/>魔镜魔镜
									</div>
									<div class="type fl">
										<p>颜色分类：<span>粉色</span></p>
										<p>型号：<span>43cm</span> </p>
									</div>
									<div class="content fl">
										<p>很好，下次不会再买</p>
										<span>2019-7-20</span>
									</div>
								</li>
								<li>
									<div class="user fl">
										<img src="img/detail/peo4.jpg"/>
										那****洋<br /><span>(匿名用户)</span>
									</div>
									<div class="type fl">
										<p>颜色分类：<span>粉色</span></p>
										<p>型号：<span>43cm</span> </p>
									</div>
									<div class="content fl">
										<p>很好，下次不会再买</p>
										<span>2019-7-20</span>
									</div>
								</li>
							</ul>
						</div>
						<div class="page fr">
							<div class="pages">
								<a class="p" href="javascript:;">上一页</a>
								<a class="active" href="javascript:;">1</a>
								<a href="javascript:;">2</a>
								<a href="javascript:;">3</a>...
								<a href="javascript:;">20</a>
								<a class="p" href="javascript:;">下一页</a>
							</div>
						</div>
					</div>
					
				</div>

			</div>
		</section>	
		
		
		<!--bottom-->
		<iframe src="public/public_bottom.html" width="100%" height="550px" frameborder="0" scrolling="no"></iframe>
		
		
		<script type="text/javascript">
			$("#size li").click(function (){
				$(this).addClass("active").siblings().removeClass("active");
			});
			$("#color li").click(function (){
				$(this).addClass("active").siblings().removeClass("active");
			});
			$("#pro li").click(function (){
				$(this).addClass("active").siblings().removeClass("active");
			});
		</script>
	</body>
</html>
